<template>
    <div class="Box">
        <div class="imgTag">
            <img :src="props.cover"/>
            <span   v-if="props.badges" 
                    :style="{ 'color':props.badges[0].text_color,'background-color':props.badges[0].border_color }"
            >{{ props.badges[0].text }}</span>
        </div>


        <div class="infoBox">
            <p>
                <tag-icon :title="props.season_type_name" color="#00AEEC" border="1px solid #00AEEC"></tag-icon>
                <span v-html="props.title"></span>
            </p>

            <div class="detail">
                <div>
                    <template v-if="props.styles">
                        <span>{{ props.styles }}</span>
                        <span>·</span>
                    </template>
                    <span>{{ formatYMD(props.pubtime) }}</span>
                    <template v-if="props.ep_size">
                        <span>·</span>
                        <span>全{{ props.ep_size }}话</span>
                    </template>
                </div>
                <p v-show="props.cv">
                    <span>声优：</span>
                    <span>{{ props.cv }}</span>
                </p>
                <p v-show="props.desc">
                    <span>简介：</span>
                    <span>{{ props.desc }}</span>
                </p>
            </div>

            <div class="scoreMedia">
                <div v-show="props.media_score.score != 0">
                    <span>{{ formatNum(props.media_score.user_count) }}人评分</span>
                    <span>{{ props.media_score.score }}</span>
                    <span>分</span>
                </div>
                <p>
                    <el-button type="primary" style="width:80px">{{ props.button_text }}</el-button>
                    <template v-if="props.eps && Number(props.eps[0].title)">
                        <media-page
                            :width="49"
                            :totalList="props.eps"
                        ></media-page>
                    </template>
                    <template v-else-if="props.eps">
                        <media-dropdown
                            :width="49"
                            :totalList="props.eps"
                        ></media-dropdown>
                    </template>
                </p>
            </div>
        </div>
    </div> 
</template>

<script lang="ts" setup>
import { formatYMD,formatNum } from '@/utils/format'
import tagIcon from '@/components/tagIcon.vue'
import { mediaPage,mediaDropdown} from './index'
type bad = {
    text:string     //盒子上的文字
    text_color:string   //标签上字体颜色
    border_color:string
    border_color_night:string
    text_color_night:string
}
interface item{
    badges:Array<bad>
    id:number
    cover:string
    index_title:string
    log_title:string
    title:number
    url:string
}
interface Props{
    type:string
    cover:string 
    cv:string               //声优  一行超出省略
    desc:string             //简介
    styles:string           //动画标签
    badges:Array<bad> | null
    media_score:{
        score:number        //评分
        user_count:number   //评分人数
    }
    eps:Array<any> | null
    title:string            //html文本
    pubtime:number          //创建时间
    season_type_name:string     //title前类型标签
    button_text:string      //按钮文本
    ep_size:number

}
const props = defineProps<Props>()
</script>

<style lang="scss" scoped>
@media  screen and (min-width: 0) and (max-width: 1600px){
    .imgTag{
        width: 30%;
    }
    .infoBox{
        width: calc(70% - 15px);
    }
}
@media  screen and (min-width: 1600px) and (max-width: 100vw){
    .imgTag{
        width: 35%;
    }
    .infoBox{
        width: calc(100% - 180px - 15px);
    }
}
p{
    padding: 0;
    margin: 0;
}
ul{
    list-style: none;
    display: flex;
}
.Box{
    display: flex;
    justify-content: start;
    width: 100%;
    height: 100%;
}
.imgTag{
    max-width: 180px;
    position: relative;
    margin-right: 15px;
    & img:nth-child(1){
        width: 100%;
        height: 100%;
        border-radius: 8px;
    }
    & span:nth-child(2){
        position: absolute;
        right: 0;
        top: 10px;
        font-size: 13px;
        padding: 2px 8px;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
    }
}
.infoBox{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: space-between;
    height: 100%;
    box-sizing: border-box;
    gap: 10px;
    & p:nth-child(1) {
        width: 100%;
        display: flex;
        height: 10%;
        justify-content: start;
        align-items: center;
        color: #18191C;
        font-size: 16px;
        font-weight: 600;
        text-align: left;
        @include noWrap;
    }
    & p:nth-child(1) span:nth-child(1){
        margin-right: 5px;
        white-space: nowrap;
    }
    & p:nth-child(1) span:nth-child(2){
        width: 95%;
        @include noWrap;
    }
}
.detail{
    display: flex;
    flex-direction: column;
    gap: 5px;
    height: 60%;
    font-size: 13px;
    line-height: 16px;
    text-align: left;
    color: #61666D;
    width: 100%;
    & div:nth-child(1){
        display: flex;
        justify-content: start;
        align-items: center;
        width: 100%;
        font-size: 13px;
        font-weight: 500;
        gap: 5px;
    }
    & div:nth-child(1),p:nth-child(2){
        @include noWrap;
    }
    & p:nth-child(3){
        color: #9499A0;
    }   
    
}
.scoreMedia{
    height: 30%;
    display: flex;
    flex-direction: column;
    justify-content: end;
    gap: 5px;
    width: 100%;
    text-align: left;
    & div:nth-child(1) {
        font-size: 14px;
        color: #61666D;
        line-height: 20px;
    }
    & div:nth-child(1) span:nth-child(2){
        margin-left: 10px;
        color: #FFA058;
        font-size: 20px;
    }
    & div:nth-child(1) span:nth-child(3){
        color: #FFA058;
        font-size: 14px;
        line-height: 20px;
        font-weight: 600;
    }
    & p{
        display: flex;
        align-items: center;
        justify-content: start;
        width: 100%;
        height: 35px;
        gap: 0 10px;

    }
    & p:nth-child(2) div:nth-child(2){
        height: 100%;
        width: calc(100% - 80px - 10px);
    }
}
.keyword {
    color: #f25d8e;
}
</style>